<template>
  <view class="page-wrap">
    <form report-submit="true">
      <view class='xinxi'>
        <text class="text">收货人</text>
        <input class="input" maxlength='20' name="Address_Name" placeholder="请输入收货人姓名" type="text" v-model="postData.Address_Name" />
      </view>
      <view class='xinxi'>
        <text class="text">联系电话</text>
        <input class="input" maxlength="11" name="Address_Mobile" placeholder="请输入联系电话" type="number" v-model="postData.Address_Mobile" />
      </view>
      <view class='xinxi'>
        <text class="text">邮编</text>
        <input class="input" maxlength="11" name="Address_Mobile" placeholder="请输入邮编" type="number" v-model="postData.postal_code" />
      </view>
      <view @click="$openPop('address')" class="area-item">
        <text class="area-label">地址</text>
        <div class="area-text">{{selectArea?selectArea:'请选择地址'}}</div>
      </view>
      <view class='xinxi'>
        <text class="text">详细地址</text>
        <input class="input" maxlength='30' name="Address_Detailed" placeholder="请输入详细地址" type="text" v-model="postData.Address_Detailed" />
      </view>

      <fun-address
        :area="selectAreaId[2]"
        :city="selectAreaId[1]"
        :province="selectAreaId[0]"
        :visiable="2"
         @up="updateAddress" class="address m-l-10 flex flex-vertical-center" ref="address"></fun-address>

      <view class='xinxi set_default'>
        <checkbox-group @change="changeCheck" name="Address_Is_Default">
          <label class="checkbox label">
            <checkbox :checked="postData.Address_Is_Default === 1" class="checkbox" value="1" />
            设置默认地址
          </label>
        </checkbox-group>
      </view>
      <button @click="formSubmit" class="tianjia-btn">确定</button>
    </form>

  </view>
</template>

<script>

import { address, delAddress, saveAddress } from '@/api/user'

import { regPhone } from '@/common/Regs'
import { error, toast } from '@/common/fun'

import { setNavigationBarTitle } from '@/common/helper'

import FunAddress from '@/components/fun-address/fun-address'
import LayoutIcon from '@/components/layout-icon/layout-icon'
import { pageMixin } from '@/mixins'

export default {
  mixins: [pageMixin],
  components: {
    LayoutIcon,
    FunAddress
  },
  data () {
    return {
      id: '', // 是否是编辑还是新增
      is_first_add: false, // 是否为该用户要添加的第一条收货地址
      postData: {
        Address_Name: '',
        Address_Mobile: '',
        postal_code: '',
        Address_Detailed: ''
      },
      selectArea: '',
      selectAreaName: [],
      selectAreaId: []
    }
  },
  methods: {
    changeCheck (e) {
      const values = e.detail.value
      console.log(values, 'ss')
      if (values.length > 0) {
        this.is_first_add = true
        return
      }
      this.is_first_add = false
    },
    async formSubmit () {
      if (!this.postData.Address_Name) {
        uni.showToast({
          title: '请输入收货人名称',
          icon: 'none'
        })
        return false
      }
      if (!this.postData.Address_Mobile) {
        uni.showToast({
          title: '请输入收货人电话',
          icon: 'none'
        })
        return
      } else if (!regPhone.test(this.postData.Address_Mobile)) {
        uni.showModal({
          title: '提示',
          content: '请输入正确的电话号码',
          showCancel: false
        })
        return
      }

      if (!this.postData.Address_Detailed) {
        uni.showToast({
          title: '请填写详细的地址',
          icon: 'none'
        })
        return
      }
      if (this.selectAreaId.length < 1) {
        uni.showToast({
          title: '请选择地址',
          icon: 'none'
        })
        return
      }
      const data = {
        name: this.postData.Address_Name,
        tel: this.postData.Address_Mobile,
        address: this.postData.Address_Detailed,
        province: this.selectAreaId[0],
        province_name: this.selectAreaName[0],
        city: this.selectAreaId[1],
        city_name: this.selectAreaName[1],
        county: this.selectAreaId[2],
        county_name: this.selectAreaName[2],
        postal_code: this.postData.postal_code,
        is_default: 0
        // Address_Town: this.selectAreaId[3]
      }
      if (this.is_first_add || this.postData.Address_Is_Default) {
        data.is_default = 1
      }

      const that = this
      if (this.id) {
        data.id = this.id
      }
      await saveAddress(data, { tip: 'loading' }).catch(e => {
        throw error(e.msg || '操作失败')
      })
      toast('操作成功')
      setTimeout(() => {
        that.$back()
      }, 1000)
    },
    updateAddress (data) {
      this.selectArea = data.str
      this.selectAreaId = data.id
      this.selectAreaName = data.strArr
    },
    async _init_func () {
      var vo = await address({ id: this.id }, {
        tip: '加载中'
      }).then(res => res.data).catch(e => {
        throw error(e.msg || '获取收货地址失败')
      })
      console.log(vo)
      this.postData = vo

      this.postData.Address_Name = vo.name
      this.postData.Address_Mobile = vo.tel
      this.postData.Address_Detailed = vo.address

      this.selectArea = vo.province_name + vo.city_name + vo.county_name
      this.selectAreaId.push(Number(vo.province))
      this.selectAreaId.push(Number(vo.city))
      this.selectAreaId.push(Number(vo.county))
      this.selectAreaName.push(vo.province_name)
      this.selectAreaName.push(vo.city_name)
      this.selectAreaName.push(vo.county_name)
      this.is_first_add = vo.is_default === 1
    }
  },
  onLoad (options) {
    // 设置标题
    setNavigationBarTitle(options.address_id ? '编辑收货地址' : '新增收货地址')
    // 有addressid 地址编辑
    if (options.address_id) {
      this.id = options.address_id
      this._init_func()
    }
  }

}
</script>

<style lang="scss" scoped>
  .myall {
    background-color: #FFFFFF !important;
    min-height: 100vh;
  }

  div, view {
    box-sizing: content-box;
  }

  .xinxi {
    width: 710rpx;
    padding: 0 20rpx;
    border-bottom: 1px #f4f4f4 solid;
    overflow: hidden;
    margin-bottom: 20rpx;
  }

  .xinxi .text {
    float: left;
    width: 140rpx;
    font-size: 28rpx;
    line-height: 90rpx;
  }

  .xinxi .input {
    width: 570rpx;
    float: left;
    font-size: 28rpx;
    line-height: 90rpx;
    height: 90rpx;
  }

  .tianjia-btn {
    width: 710rpx;
    margin: 50rpx 20rpx 20rpx;
    color: #fff;
    background: #F43131;
    border-radius: 8rpx;
  }

  .dizhi {
    width: 710rpx;
    padding: 0 20rpx;
    border-bottom: 1px #f4f4f4 solid;
    overflow: hidden;
    margin-bottom: 20rpx;
  }

  .dizhi, .xiangzhen {
    width: 710rpx;
    padding: 0 20rpx;
    border-bottom: 1px #f4f4f4 solid;
    overflow: hidden;
    margin-bottom: 20rpx;
  }

  .xiangzhen .text {
    float: left;
    width: 140rpx;
    font-size: 28rpx;
    line-height: 90rpx;
  }

  .dizhi .text {
    float: left;
    width: 140rpx;
    font-size: 28rpx;
    line-height: 90rpx;
  }

  .dizhi .input {
    width: 180rpx;
    float: left;
    font-size: 28rpx;
    line-height: 90rpx;
    height: 90rpx;
    margin-right: 10rpx;
  }

  .picker .view {
    width: 180rpx;
    float: left;
    font-size: 28rpx;
    line-height: 90rpx;
    height: 90rpx;
    margin-right: 10rpx;
  }

  .set_default {
    border-bottom: none;
  }

  .set_default .label {
    font-size: 28rpx;
  }

  .set_default .label .checkbox {
    transform: scale(.7);
    position: relative;
    top: -2px;
  }

  .area-item {
    display: flex;
    align-items: center;
    padding: 30rpx 20rpx;
    border-bottom: 1px solid #f4f4f4;
    font-size: 28rpx;

    .area-label {
      display: inline-block;
      width: 140rpx;
      margin-right: 10rpx;
    }
  }

  .area-text {
    width: 600rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
</style>
